<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS-Select</title>
	<style>
		*{margin:0;padding:0;font-size: 16px;}
		#search{position: relative; margin:50px auto; width: 200px;}
		.box{border:1px solid #999;padding:0 5%;height: 30px; line-height: 30px;}
		#select{cursor: pointer;}
		#sub{display: none; position: absolute;left: 0;top: 30px;width: 100%; background: #f1f1f1; list-style:none;}
		#sub li{padding:0 5%;height: 30px;line-height: 30px;font-size: 14px;cursor: pointer;}
		#sub li:hover{background: #ccc;}
	</style>
	<script>
		window.onload = function(){
			var oSelect = document.getElementById("select");
			var oSub = document.getElementById("sub");
			var oLi = oSub.getElementsByTagName("li");

			/*显示下拉菜单*/
			oSelect.onclick = function(e){
				var style = oSub.style;
				/*判断显示或隐藏*/
				style.display = style.display == "block" ? "none" : "block";
				/*阻止事件冒泡兼容ie的方法*/
				(e || window.event).cancelBubble = true;
				/*不兼容ie的方法
				e.stopPropagation();*/
			}

			/*点击替换文本*/
			for(var i = 0;i < oLi.length; i++){
				oLi[i].onclick = function(){
					oSelect.innerHTML = this.innerHTML; 
				}
			}

			/*点击隐藏下拉菜单*/
			document.onclick = function(){
				oSub.style.display = "none";
			}
		}
	</script>
</head>
<body>
	<div id="search">
		<div class="box">
			<form>
				<p id="select">晚饭吃什么？</p>
			</form>
		</div>
		<ul id="sub">
			<li>兰州炒饭</li>
			<li>牛肉面</li>
			<li>过桥米线</li>
			<li>小炒肉</li>
		</ul>
	</div>
</body>
</html>